import classNames from 'classnames';
import { observer } from "mobx-react";
import React from 'react';
import { NavLink } from 'react-router-dom';
import { ActionSheet, Card, Icon, Tools } from 'weaver-mobile';
import If, { Else, Then } from '../../../common/if';
import ListView from '../../../common/list-view';

const getLabel = Tools.getLabel;
const getCurrentLabel = Tools.base64.getCurrentLabel;
const isIPhone = new RegExp('\\biPhone\\b|\\biPod\\b', 'i').test(window.navigator.userAgent);
let wrapProps;

if (isIPhone) {
  wrapProps = {
    onTouchStart: e => e.preventDefault(),
  };
}

@observer
export default class MobileListView extends React.Component {

  renderRow = (rowData, sectionID, rowID) => {
    const bodyStyle = { padding: '16px 16px 32px', height: '100%' };
    const isCollecting = Number(rowData.processspan) === 1;
    const title = <div className='title'>{getCurrentLabel(rowData.name)}</div>;

    return (
      <div className='edc-app-item'>
        <Card bodystyle={bodyStyle} >
          <NavLink to={'/form/detail/' + rowData.id} >
            <Card.Header title={title} />
            <div className='main'>
              <div className='text'>
                <div>{getCurrentLabel(rowData.creatorspan)}</div>
                <div style={{ 'marginTop': 5, color: '#999' }}>{`${rowData.createDate} ${rowData.createTimespan}`}</div>
              </div>
              <div className={classNames("status", { stop: !isCollecting })}>
                {isCollecting ? getLabel(523252, '收集中') : getLabel(523323, '已停止')}
              </div>
            </div>
          </NavLink>
          <Card.Footer content={this.renderFooter(rowData)} />
        </Card>
      </div>
    );
  };

  renderFooter(rowData) {
    return (
      <div className='opt'>
        <NavLink to={{ pathname: '/form/statistics/' + encodeURI(rowData.id) }}>
          <Icon type={'blog-report-form-hot'} size={'xxs'} /><span>{getLabel(523324, '统计')}</span>
        </NavLink>
        <NavLink to={{ pathname: '/form/share', appName: rowData.name, appid: rowData.id }}>
          <Icon type={'forward'} size={'xxs'} /><span>{getLabel(523325, '分享')}</span>
        </NavLink>
        <If condition={rowData.rightLevel >= 2}>
          <Then>
            <NavLink to={'/form/power/' + rowData.id}>
              <Icon type={'reading-volume'} size={'xxs'} /><span>{getLabel(523326, '权限')}</span>
            </NavLink>
          </Then>
          <Else>
            <span className='item-opt-norightlevel'>
              <Icon type={'reading-volume'} size={'xxs'} /><span>{getLabel(523326, '权限')}</span>
            </span>
          </Else>
        </If>
        <span
          className={classNames({ 'item-opt-norightlevel': rowData.rightLevel < 2 })}
          onClick={() => this.showMoreAction(rowData.id, rowData.processspan, rowData.rightLevel)}
        >
          <Icon type='more-02' size='xxs' /><span>{getLabel(523327, '更多')}</span>
        </span>
      </div>
    );
  }

  showMoreAction = (appid, fillinEnable, rightLevel) => {
    if (rightLevel < 2) return;

    const allowCollect = Number(fillinEnable) === 1;
    const { onFillinEnable } = this.props;
    const buttons = [
      {
        content: allowCollect ? getLabel(523248, '停止收集') : getLabel(523249, '继续收集'),
        onClick: () => onFillinEnable(appid, allowCollect),
      },
      { content: getLabel(523250, '取消') }
    ];

    ActionSheet.showActionSheetWithOptions({
      options: buttons,
      cancelButtonIndex: buttons.length - 1,
      maskClosable: true,
      wrapProps,
    });
  }

  render() {
    const { store, visible } = this.props;

    return (
      <ListView
        visible={visible}
        store={store}
        renderRow={this.renderRow}
      />
    );
  }
}